<template>
  <div>
    <el-container>
      <el-header>
        <p>查询</p>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <div id='up'>
            <el-form-item label="搜索：">
              <el-input v-model="formInline.orderId" placeholder="输入单号进行搜索"></el-input>
            </el-form-item>
            <el-form-item label="时间：">
              <el-date-picker id='timechoose' v-model="formInline.time" type="datetimerange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日 hh 时 mm 分 ss 秒" value-format="yyyy-MM-dd hh:mm:ss">
              </el-date-picker>
            </el-form-item>
          </div>
          <div id='down'>
            <el-form-item label="支付方式：">
              <el-select v-model="formInline.payWay" placeholder="请选择支付方式">
                <el-option :key="i" :label="v.pay_way" :value="v.pay_way" v-for='(v,i) in payWayData'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="桌位区域：">
              <el-select v-model="formInline.tableArea" placeholder="请选择桌位区域">
                <el-option :key="i" :label="v.table_position" :value="v.table_position" v-for='(v,i) in areaData'></el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" round @click="onSearch">查询</el-button>
            <el-button type="primary" round @click="onReset">重置</el-button>
          </div>
        </el-form>
      </el-header>
      <!-- 菜品列表 -->
      <el-main>
        <!-- 明细数据 -->
        <p class='clear' id='detail'>
          <span>明细数据</span>
          <el-button type="primary" round @click="onExport">导出</el-button>
        </p>
        <!-- 表格 -->
        <el-table :data="tableData" tooltip-effect="dark" :cell-style="{border:'1px solid #DCDCDC'}" :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}" stripe style="width: 100%">
          <el-table-column prop="cash_rank" label="序号" width="100" align='center'></el-table-column>
          <el-table-column prop="order_num" label="单号" width="120" align='center'></el-table-column>
          <el-table-column prop="table_position" label="桌位区域" width="100" align='center'></el-table-column>
          <el-table-column prop="table_num" label="桌位编号" width="100" align='center'></el-table-column>
          <el-table-column prop="pay_way" label="付款方式" width="100" align='center'></el-table-column>
          <el-table-column prop="cash_money" label="金额" width="107" align='center'></el-table-column>
          <el-table-column prop="dis_money" label="优惠额度" width="100" align='center'></el-table-column>
          <el-table-column prop="user_name" label="收银员" width="100" align='center'></el-table-column>
          <el-table-column prop="order_time" label="时间" width="180" align='center'></el-table-column>
          <el-table-column prop="customer_name" label="用户名" width="100" align='center'></el-table-column>
          <el-table-column prop="order_payfor_num" label="付款凭证号" width="150" align='center'></el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[2,5,10,15,20,25,30]" :page-size="count" layout="total,sizes,prev, pager, next, jumper" :total="totalData.length">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped lang='less'>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
.el-header {
  border: 1px solid #dcdcdc;
  height: 200px !important;
  padding: 0;
  p {
    background: #f2f2f2;
    padding: 15px;
    padding-bottom: 10px;
    margin-bottom: 25px;
  }
  .el-form {
    margin-left: 50px;
    .el-form-item {
      margin-right: 40px;
    }
  }
}
.el-main {
  margin-top: 15px;
  border: 1px solid #dcdcdc;
  padding: 18px 10px 20px 10px;
  #detail {
    background: #f2f2f2;
    line-height: 35px;
    padding: 15px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    clear: both;
    .el-button {
      float: right;
    }
  }
}
.el-table {
  margin-bottom: 50px;
}
.el-pagination {
  text-align: center;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
#up {
  width: 100%;
  .el-form-item:first-child {
    width: 20%;
  }
  .el-form-item:last-child {
    width: 70%;
  }
}
</style>
<script>
export default {
  data() {
    return {
      // 搜索框数据
      formInline: {
        orderId: '',
        time: [],
        payWay: '',
        tableArea: ''
      },
      // 桌位区域
      areaData: [],
      // 支付方式数据
      payWayData: [],
      // 时间选择器
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      // 收银流水总数据
      totalData: [],
      // 中间数组
      centerData: [],
      // 页码
      page: 1,
      // 条数
      count: 5
    }
  },
  methods: {
    // 右上角小x
    handleClose(){
        this.tableVisible=false;
    },
    // 查询
    onSearch() {
      if (!this.formInline.time.length) {
        this.formInline.time = ['', '']
      }
      this.$axios({
        url: '/yl/cashierwater/getorderid',
        params: this.formInline,
      }).then((res) => {
        this.totalData = res.data.data
        this.totalData.forEach(v => {
          v.order_time = v.order_time.replace(/T/g, ' ').slice(0, v.order_time.replace(/T/g, ' ').indexOf('.'));
          return v
        })
        this.page = 1
      })
    },
    // 重置
    onReset() {
      this.formInline = {
        orderId: '',
        time: '',
        payWay: '',
        tableArea: ''
      }
      this.getCashierwater();
    },
    // 导出
    onExport() {
      this.$alert('是否确认导出明细？', {
        title: '导出明细',
        callback: () => {
          let datalist = [];
          datalist.push([
            "序号",
            "单号",
            "桌位区域",
            "桌位编号",
            "付款方式",
            "金额",
            "优惠额度",
            "收银员",
            "时间",
            "用户名",
            "付款凭证号"
          ]);
          this.tableData.forEach(item => {
            datalist.push([
              item.cash_rank,
              item.order_num,
              item.table_position,
              item.table_num,
              item.pay_way,
              item.cash_money,
              item.dis_money,
              item.user_name,
              item.order_time,
              item.customer_name,
              item.order_payfor_num
            ]);
          });
          this.$downloadXlsx(datalist, "收银流水明细数据.xlsx");
          this.$message({
            type: 'success',
            message: '导出成功!'
          });
        }
      });
    },
    // 每页多少条数据
    handleSizeChange(count) {
      this.count = count
    },
    // 分页
    handleCurrentChange(page) {
      this.page = page
    },
    // 获取桌位区域
    getTablearea() {
      this.$axios({
        url: '/yl/tablelist/gettablearea'
      }).then((res) => {
        this.areaData = res.data.data
      })
    },
    // 获取支付方式
    getPayway() {
      this.$axios({
        url: '/yl/cashierwater/getpayway'
      }).then((res) => {
        this.payWayData = res.data.data
      })
    },
    // 获取所有数据
    getCashierwater() {
      this.$axios({
        url: '/lky/cashierwater/getcashierwater'
      }).then((res) => {
        this.totalData = res.data.data
        this.totalData.forEach(v => {
          v.order_time = v.order_time.replace(/T/g, ' ').slice(0, v.order_time.replace(/T/g, ' ').indexOf('.'));
          return v
        })
      })
    }
  },
  // 创建后
  created() {
    this.getTablearea();
    this.getPayway();
    this.getCashierwater();
  },
  // 计算
  computed: {
    // 每页数据
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count)
    }
  }
}
</script>